<template>
  <div class="count1">
    <button @click ="add(num)">累加{{num}}</button>
    <h1>count: {{count}}</h1>
    <h1>id的值是: {{id}}</h1>
  </div>
</template>

<script>
export default {
  //名字
  name: "Count1",
  

  //props还可以做更多限制

  props:{
    //限制num类型
    num:{
      type: Number, //类型Number
    },
    //限制id类型
    id:{
      type: String, //类型字符串
      required:true, //必传
      default: Date.now(), //默认值 如果传值了默认值会被覆盖
    }
  },

  data(){
    return{
      count: 0
    }
  },
 
  //函数
  methods:{
    add(num){
        this.count += num
    }
  }
};
</script>

<style>
.count1 {
  background-color: aqua;
  height: 200px;
}
</style>